<template>
  <div class="form-demo">
    <h2>Basic Form Example</h2>
    <UXForm
      @register="registerForm"
      @submit="handleSubmit"
      @reset="handleReset"
    />
    
    <div v-if="formData" class="result-panel">
      <h3>Form Submission Result:</h3>
      <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { UXForm, useUXForm } from '@axewo/ux-element'
import type { FormSchema } from '@axewo/ux-element'
const formData = ref<Record<string, any> | null>(null)

// Create form schema definition
const formSchemas = reactive<FormSchema[]>([
  {
    field: 'name',
    component: 'Input',
    label: 'Name',
    required: true,
    rules: [{ required: true, message: 'Please enter your name', trigger: 'blur' }],
    colProps: { span: 12 }
  },
  {
    field: 'age',
    component: 'InputNumber',
    label: 'Age',
    componentProps: {
      min: 1,
      max: 120,
      placeholder: 'Please enter your age'
    },
    colProps: { span: 12 }
  },
  {
    field: 'gender',
    component: 'RadioGroup',
    label: 'Gender',
    required: true,
    componentProps: {
      placeholder: 'Please select your gender'
    },
    options: [
      { label: 'Male', value: 'male' },
      { label: 'Female', value: 'female' },
      { label: 'Other', value: 'other' }
    ],
    colProps: { span: 12 }
  },
  {
    field: 'education',
    component: 'Select',
    label: 'Education',
    componentProps: {
      placeholder: 'Please select your education'
    },
    options: [
      { label: 'High School', value: 'high_school' },
      { label: 'College', value: 'college' },
      { label: 'Bachelor', value: 'bachelor' },
      { label: 'Master', value: 'master' },
      { label: 'PhD', value: 'phd' }
    ],
    colProps: { span: 12 }
  },
  {
    field: 'birthday',
    component: 'DatePicker',
    label: 'Birthday',
    componentProps: {
      type: 'date',
      placeholder: 'Select your birthday'
    },
    colProps: { span: 12 }
  },
  {
    field: 'workPeriod',
    component: 'DatePicker',
    label: 'Work Period',
    componentProps: {
      type: 'daterange',
      startPlaceholder: 'Start Date',
      endPlaceholder: 'End Date'
    },
    colProps: { span: 12 }
  },
  {
    field: 'hobbies',
    component: 'CheckboxGroup',
    label: 'Hobbies',
    options: [
      { label: 'Reading', value: 'reading' },
      { label: 'Music', value: 'music' },
      { label: 'Sports', value: 'sports' },
      { label: 'Travel', value: 'travel' },
      { label: 'Coding', value: 'coding' }
    ],
    colProps: { span: 24 }
  },
  {
    field: 'skills',
    component: 'Rate',
    label: 'Skill Rating',
    componentProps: {
      max: 5,
      allowHalf: true
    },
    helpMessage: 'Please rate your skill level',
    colProps: { span: 12 }
  },
  {
    field: 'salary',
    component: 'Slider',
    label: 'Expected Salary',
    componentProps: {
      min: 0,
      max: 50000,
      step: 1000,
      showStops: true,
      showInput: true
    },
    colProps: { span: 12 }
  },
  {
    field: 'address',
    component: 'Input',
    label: 'Address',
    componentProps: {
      type: 'textarea',
      rows: 3,
      placeholder: 'Please enter your address'
    },
    colProps: { span: 24 }
  }
])

// Use form hook
const [registerForm, { validate, resetFields, setFieldsValue, getFieldsValue, setSchemas }] = useUXForm({
  labelWidth: '120px',
  schemas: formSchemas
})

// Set schemas after component mounted
onMounted(() => {
  setSchemas(formSchemas)
})

// Submit form
const handleSubmit = async (values: Record<string, any>) => {
  formData.value = values
  console.log('Form submission data:', values)
}

// Reset form
const handleReset = () => {
  formData.value = null
  console.log('Form has been reset')
}
</script>

<style scoped>
.form-demo {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.result-panel {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

h2 {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

h3 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #606266;
}
</style> 